import React, { useState, useRef } from 'react';
import { Form, Button, Modal, Input } from 'antd';


const UpdateForm = ({
  onSubmit: handleUpdate,
  onCancel: handleUpdateModalVisible,
  updateModalVisible,
  type: type, //0:添加司机,1:编辑,2:查看
}) => {
  // const [userList, setUserList] = useState([]);
  // const [departList, setDepartList] = useState([]);
  console.log('*******type*****');
  console.log(type);
  const actionRef = useRef();

  // useEffect(() => {
  //   queryUser({ depart: '1' }).then((data) => {
  //     setUserList(data)
  //   })
  //   queryDepart({ depart: '1' }).then((data) => {
  //     setDepartList(data)
  //   })
  // }, [])
  const handleConfirm = async (fieldsValue) => {
    console.log('*****fieldsValue*******');
    console.log(fieldsValue);
    handleUpdate(fieldsValue);
  };

  const RenderContent = () => {
    return (
      <Form
        name="basic"
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        onFinish={handleConfirm}
        autoComplete="off"
      >
        <Form.Item
          label="司机姓名"
          name="name"
          rules={[{ required: true, message: '请输入司机姓名!' }]}
        >
          <Input maxLength={256}/>
        </Form.Item>
        <Form.Item
          label="联系方式"
          name="phone"
          maxLength={11}
          validateTrigger='onBlur'
          rules={[{ required: true, message: '请输入联系方式!' 
        },{
            required: false,        //在用户输入了内容后，再进行此项验证，所以要设为false
            label:"手机号",
            pattern: new RegExp(/^1(3|4|5|6|7|8|9)\d{9}$/, "g"),
            message: '请输入正确的手机号'
          }]}
        >
          <Input maxLength={11}/>
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            创建
          </Button>
        </Form.Item>
      </Form>
    );
  };
  const EditRenderContent = () => {
    return (
      <Form
        name="basic"
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        initialValues={updateModalVisible}
        onFinish={handleConfirm}
        autoComplete="off"
      >
        <Form.Item
          label="司机姓名"
          name="name"
          rules={[{ required: true, message: '请输入司机姓名!' }]}
        >
          <Input maxLength={256}/>
        </Form.Item>
        <Form.Item
          label="联系方式"
          name="phone"
          // maxLength={11}
          validateTrigger='onBlur'
          rules={[{ required: true, message: '请输入联系方式!' 
        },{
            required: false,        //在用户输入了内容后，再进行此项验证，所以要设为false
            label:"手机号",
            pattern: new RegExp(/^1(3|4|5|6|7|8|9)\d{9}$/, "g"),
            message: '请输入正确的手机号'
          }]}
        >
          <Input maxLength={11}/>
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            修改
          </Button>
        </Form.Item>
      </Form>
    );
  };
  const SearchRenderContent = () => {
    return (
      <Form
        name="basic"
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        onFinish={handleConfirm}
        autoComplete="off"
      >
        <Form.Item label="司机姓名" name="username">
          {updateModalVisible.name}
        </Form.Item>
        <Form.Item label="联系方式" name="phone">
          {updateModalVisible.phone}
        </Form.Item>
      </Form>
    );
  };

  return (
    <Modal
      width={640}
      destroyOnClose
      title={type == 0 ? '添加司机' : type == 1 ? '编辑司机信息' : '查看司机信息'}
      visible={updateModalVisible}
      footer={null}
      onCancel={() => handleUpdateModalVisible()}
      // bodyStyle={{textAlign:'justify'}}
      // style={{textAlign:'center'}}
      headStyle={{ textAlign: 'center' }}
    >
      {type == 0 && <RenderContent />}
      {type == 1 && <EditRenderContent />}
      {type == 2 && <SearchRenderContent />}
    </Modal>
  );
};

export default UpdateForm;
